<template>
	<view>
		<view class="container">
			<image class="container-avatar" :src="data && data.avatar" mode="aspectFill" v-if="data.avatar"></image>
			<view class="container-top">
				<view class="container-name font-AlimamaDongFangDaKaiRegular">
					{{data.name}}
				</view>
				<image class="container-gender" 
				:src="sheep.$url.static('/assets/img/modal-market-male.png')" 
				mode="aspectFill" 
				v-if="data.gender === 'male'"></image>
				<image class="container-gender" 
				:src="sheep.$url.static('/assets/img/modal-market-female.png')" 
				mode="aspectFill" 
				v-if="data.gender === 'female'"></image>
			</view>
			<view class="container-id font-AlimamaDongFangDaKaiRegular" 
			v-if="props.modalType.includes('bird') || props.modalType.includes('profile')">
				ID:{{data.id || ''}}
			</view>
			<view class="container-bottom" v-if="props.modalType.includes('bird') || props.modalType.includes('profile')">
				<image class="container-luckImg" :src="sheep.$url.static('/assets/img/modal-market-luck.png')" mode="aspectFill">
				</image>
				<view class="container-luck font-AlimamaDongFangDaKaiRegular">
					幸运
				</view>
				<view class="container-luck font-AlimamaDongFangDaKaiRegular">
					{{data.score}}
				</view>
			</view>
			<view class="container-bottom" v-if="props.modalType.includes('egg')">
				<view class="container-bottom-left font-AlimamaDongFangDaKaiRegular">
					可孵化小朱雀
				</view>
				<image class="container-luckImg" :src="sheep.$url.static('/assets/img/modal-market-lingli.png')" mode="aspectFill">
				</image>
				<view class="container-bottom-lingli font-AlimamaDongFangDaKaiRegular">
					灵力 
				</view>
				<view class="container-luck font-AlimamaDongFangDaKaiRegular">
					{{data.score}}
				</view>
			</view>
			<view class="container-bottom" v-if="props.modalType === 'market-fruit'">
				<view class="container-luck container-remaining font-AlimamaDongFangDaKaiRegular">
					剩余可购买数量:{{data.remainingCount || ''}}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import sheep from '@/sheep';
	import {
		computed,
		reactive,
		ref
	} from 'vue';
	const props = defineProps({
		modalType: {
			type: String,
			default: 'market-bird'
		},
		detail: {
			type: Object,
			default: {
				"id": 123459,
				"userId": 10086,
				"sex": 0,
				"algebra": 2,
				"powerValue": 44,
				"luckValue": 56,
				"status": 0,
				"rank": 1,
				"basicsMessage": ""
			}
		}
	})
	const data = computed(() => {
		if(!props.detail) return {
			avatar: sheep.$url.static('/assets/img/modal-market-zhuque.png'),
			name: '代小朱雀',
			gender: 'male',
			score: '9',
			id:222222
		}
		
		if(props.modalType.includes('bird')){
			return {
				avatar: sheep.$url.static('/assets/img/modal-market-zhuque.png'),
				name: props.detail.algebra + '代小朱雀',
				gender: props.detail.sex ? 'male' : 'female',
				score: props.detail.luckValue,
				id:props.detail.id
			}
		}else if(props.modalType.includes('egg')){
			return {
				avatar: sheep.$url.static('/assets/img/modal-market-zhuquedan.png'),
				name: '2代小朱雀蛋',
				gender: '',
				score: '41-106'
			}
		}else if(props.modalType.includes('fruit')){
			return {
				avatar: sheep.$url.static('/assets/img/modal-market-huolinguo.png'),
				name: '火灵果',
				gender: '',
				remainingCount: 67807
			}
		}else{
			return {
				avatar: sheep.$url.static('/assets/img/zq-profile-zhuque.png'),
				name: '1代朱雀',
				gender: 'male',
				score: '9',
				id: '121260158'
			}
		}
		
	})
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;

		.container-avatar {
			width: 290rpx;
			height: 240rpx;
		}

		.container-top {
			margin-top: 36rpx;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;

			.container-name {
				margin-right: 12rpx;
				white-space: nowrap;
				height: 34rpx;
				font-weight: 400;
				font-size: 48rpx;
				color: #017482;
				line-height: 34rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}

			.container-gender {
				width: 54rpx;
				height: 54rpx;
			}
		}

		.container-id {
			margin-top: 14rpx;
			white-space: nowrap;
			height: 34rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #017482;
			line-height: 34rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}

		.container-bottom {
			margin-top: 12rpx;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;

			.container-luckImg {
				width: 50rpx;
				height: 50rpx;
			}

			.container-luck {
				margin-left: 12rpx;
				white-space: nowrap;
				height: 34rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #017482;
				line-height: 34rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
			.container-remaining{
				margin-top: 12rpx;
			}
			
			.container-bottom-left{
				margin-right: 6rpx;
				color: #017482;
				text-align: center;
				font-size: 28rpx;
				font-style: normal;
				font-weight: 400;
			}
			
			.container-bottom-lingli{
				margin-left: 6rpx;
				margin-right: 12rpx;
				color: #017482;
				text-align: center;
				font-size: 28rpx;
				font-style: normal;
				font-weight: 400;
			}
			
		}
	}
</style>